<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能对话助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#165DFF',
              secondary: '#36CFC9',
              dark: '#1D2129',
              light: '#F2F3F5',
              muted: '#86909C'
            },
            fontFamily: {
              inter: ['Inter', 'system-ui', 'sans-serif'],
            },
          },
        }
      }
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .chat-height {
          height: calc(100vh - 12rem);
        }
        .gradient-bg {
          background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
        }
        .typing-animation span {
          width: 0.6rem;
          height: 0.6rem;
          margin: 0 0.1rem;
          background-color: #165DFF;
          border-radius: 50%;
          display: inline-block;
          animation: typing-bounce 1.4s infinite ease-in-out both;
        }
        .typing-animation span:nth-child(1) { animation-delay: -0.32s; }
        .typing-animation span:nth-child(2) { animation-delay: -0.16s; }
        
        @keyframes typing-bounce {
          0%, 80%, 100% { transform: scale(0); }
          40% { transform: scale(1); }
        }
      }
    </style>
  </head>
  <body class="font-inter bg-light text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="gradient-bg text-white shadow-lg z-10">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <div class="bg-white/20 rounded-lg p-2">
            <i class="fa fa-comments text-xl"></i>
          </div>
          <h1 class="text-2xl font-bold">智能对话助手</h1>
        </div>
        <div class="flex items-center space-x-6">
          <button class="hover:text-white/80 transition-colors duration-300">
            <i class="fa fa-history mr-1"></i> 历史
          </button>
          <button class="hover:text-white/80 transition-colors duration-300">
            <i class="fa fa-cog mr-1"></i> 设置
          </button>
          <button class="bg-white/20 hover:bg-white/30 rounded-lg px-4 py-2 transition-colors duration-300">
            <i class="fa fa-user-circle mr-1"></i> 登录
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 flex flex-col">
      <!-- 对话区域 -->
      <div id="chat-container" class="bg-white rounded-xl shadow-lg overflow-hidden flex-grow flex flex-col mb-6">
        <!-- 对话头部 -->
        <div class="border-b border-gray-200 p-4 flex items-center">
          <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
            <i class="fa fa-robot text-xl"></i>
          </div>
          <div class="ml-3">
            <h2 class="font-semibold">智能助手</h2>
            <p class="text-sm text-muted">随时为您服务</p>
          </div>
        </div>
        
        <!-- 消息列表 -->
        <div id="messages" class="flex-grow p-4 overflow-y-auto chat-height space-y-6">
          <!-- 系统消息 -->
          <div class="flex items-start">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
              <i class="fa fa-info-circle"></i>
            </div>
            <div class="ml-3 bg-primary/5 rounded-lg p-4 max-w-[80%]">
              <p class="text-muted">欢迎使用智能对话助手！我可以回答您的问题、提供建议或进行一般性的对话。</p>
            </div>
          </div>
          
          <!-- AI消息 -->
          <div class="flex items-start">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
              <i class="fa fa-robot"></i>
            </div>
            <div class="ml-3 bg-white border border-gray-100 rounded-lg p-4 max-w-[80%] shadow-sm">
              <p>有什么我可以帮助您的吗？您可以询问任何问题，我会尽力提供准确的回答。</p>
            </div>
          </div>
          
          <!-- 用户消息 -->
          <div class="flex items-start justify-end">
            <div class="mr-3 bg-primary text-white rounded-lg p-4 max-w-[80%] shadow-sm">
              <p>你好！请问如何提高编程效率？</p>
            </div>
            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 flex-shrink-0">
              <i class="fa fa-user"></i>
            </div>
          </div>
          
          <!-- AI消息 -->
          <div class="flex items-start">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
              <i class="fa fa-robot"></i>
            </div>
            <div class="ml-3 bg-white border border-gray-100 rounded-lg p-4 max-w-[80%] shadow-sm">
              <p>提高编程效率有很多方法，以下是一些建议：</p>
              <ul class="list-disc pl-5 mt-2 space-y-1">
                <li>学习并使用快捷键和代码片段</li>
                <li>使用版本控制系统如Git</li>
                <li>定期重构代码以提高可维护性</li>
                <li>学习调试技巧和工具</li>
                <li>参与开源项目和技术社区</li>
              </ul>
              <p class="mt-2">这些方法可以帮助您更高效地编写和维护代码。您对哪个方面特别感兴趣？</p>
            </div>
          </div>
          
          <!-- 正在输入状态 -->
          <div class="flex items-start">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
              <i class="fa fa-robot"></i>
            </div>
            <div class="ml-3 bg-white border border-gray-100 rounded-lg p-4 max-w-[80%] shadow-sm">
              <div class="typing-animation">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="border-t border-gray-200 p-4">
          <div class="flex space-x-3">
            <button class="text-muted hover:text-primary transition-colors duration-300 p-2">
              <i class="fa fa-paperclip text-xl"></i>
            </button>
            <textarea id="message-input" placeholder="输入您的问题..." class="flex-grow border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" rows="1"></textarea>
            <button id="send-button" class="bg-primary hover:bg-primary/90 text-white rounded-lg px-4 py-2 transition-colors duration-300 flex items-center justify-center">
              <i class="fa fa-paper-plane mr-2"></i> 发送
            </button>
          </div>
          <div class="text-xs text-muted mt-2 flex justify-between">
            <div>按 Enter 发送消息，Shift+Enter 换行</div>
            <div>支持 Markdown 语法</div>
          </div>
        </div>
      </div>
      
      <!-- 功能卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-xl p-5 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
              <i class="fa fa-lightbulb-o text-2xl"></i>
            </div>
            <h3 class="ml-4 text-lg font-semibold">智能建议</h3>
          </div>
          <p class="mt-3 text-muted">获取个性化建议和解决方案，帮助您解决各种问题。</p>
        </div>
        
        <div class="bg-white rounded-xl p-5 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
              <i class="fa fa-code text-2xl"></i>
            </div>
            <h3 class="ml-4 text-lg font-semibold">代码助手</h3>
          </div>
          <p class="mt-3 text-muted">生成代码片段、调试程序、解释复杂代码，提高编程效率。</p>
        </div>
        
        <div class="bg-white rounded-xl p-5 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
              <i class="fa fa-book text-2xl"></i>
            </div>
            <h3 class="ml-4 text-lg font-semibold">知识探索</h3>
          </div>
          <p class="mt-3 text-muted">深入了解各种主题，获取结构化知识和详细解释。</p>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-6 mt-8">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-4 md:mb-0">
            <div class="flex items-center space-x-3">
              <div class="bg-white/10 rounded-lg p-2">
                <i class="fa fa-comments text-xl"></i>
              </div>
              <h2 class="text-xl font-bold">智能对话助手</h2>
            </div>
            <p class="text-white/70 mt-2">智能、高效的AI对话解决方案</p>
          </div>
          
          <div class="flex space-x-6">
            <a href="#" class="text-white/70 hover:text-white transition-colors duration-300">
              <i class="fa fa-github text-xl"></i>
            </a>
            <a href="#" class="text-white/70 hover:text-white transition-colors duration-300">
              <i class="fa fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-white/70 hover:text-white transition-colors duration-300">
              <i class="fa fa-linkedin text-xl"></i>
            </a>
          </div>
        </div>
        
        <div class="border-t border-white/10 mt-6 pt-6 text-center text-white/50 text-sm">
          <p>© 2025 智能对话助手. 保留所有权利.</p>
        </div>
      </div>
    </footer>

    <script>
      // 处理消息输入和发送
      document.addEventListener('DOMContentLoaded', function() {
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        const messagesContainer = document.getElementById('messages');
        
        // 自动调整文本框高度
        messageInput.addEventListener('input', function() {
          this.style.height = 'auto';
          this.style.height = (this.scrollHeight) + 'px';
          if (this.scrollHeight > 150) {
            this.style.height = '150px';
            this.style.overflowY = 'auto';
          } else {
            this.style.overflowY = 'hidden';
          }
        });
        
        // 发送消息
        function sendMessage() {
          const message = messageInput.value.trim();
          if (!message) return;
          
          // 添加用户消息到对话
          const userMessageHtml = `
            <div class="flex items-start justify-end">
              <div class="mr-3 bg-primary text-white rounded-lg p-4 max-w-[80%] shadow-sm">
                <p>${message}</p>
              </div>
              <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 flex-shrink-0">
                <i class="fa fa-user"></i>
              </div>
            </div>
          `;
          messagesContainer.insertAdjacentHTML('beforeend', userMessageHtml);
          
          // 清空输入框
          messageInput.value = '';
          messageInput.style.height = 'auto';
          
          // 滚动到底部
          messagesContainer.scrollTop = messagesContainer.scrollHeight;
          
          // 显示"正在输入"状态
          const typingHtml = `
            <div class="flex items-start ai-typing">
              <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                <i class="fa fa-robot"></i>
              </div>
              <div class="ml-3 bg-white border border-gray-100 rounded-lg p-4 max-w-[80%] shadow-sm">
                <div class="typing-animation">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          `;
          messagesContainer.insertAdjacentHTML('beforeend', typingHtml);
          messagesContainer.scrollTop = messagesContainer.scrollHeight;
          
          // 模拟AI回复（实际应用中这里应该是API调用）
          setTimeout(() => {
            // 移除"正在输入"状态
            const typingElement = document.querySelector('.ai-typing');
            if (typingElement) typingElement.remove();
            
            // 添加AI回复
            const aiResponse = `感谢您的提问！您的问题是："${message}"。这是一个很好的问题。在实际应用中，我会连接到AI模型获取准确回答，但在当前演示中，我只能提供模拟回复。`;
            
            const aiMessageHtml = `
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                  <i class="fa fa-robot"></i>
                </div>
                <div class="ml-3 bg-white border border-gray-100 rounded-lg p-4 max-w-[80%] shadow-sm">
                  <p>${aiResponse}</p>
                </div>
              </div>
            `;
            messagesContainer.insertAdjacentHTML('beforeend', aiMessageHtml);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
          }, 1500);
        }
        
        // 点击发送按钮
        sendButton.addEventListener('click', sendMessage);
        
        // 按Enter发送消息，Shift+Enter换行
        messageInput.addEventListener('keydown', function(e) {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
          }
        });
      });
    </script>
  </body>
  </html>
  